import { NodeSize } from '../config'

export default function jsonInput(flow) {
  flow.register('JsonInput', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M908.434286 800.572952v75.142096l-127.390476-127.366096-32.768 32.743619 127.439238 127.414858-76.726858 0.024381 0.024381 46.323809 155.769905-0.073143v-154.209524z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M625.347048 428.153905c-13.775238-36.230095-42.105905-67.754667-88.454096-82.797715 46.299429 15.018667 74.630095 46.543238 88.454096 82.797715zM444.17219 654.896762c16.725333 17.724952 39.009524 31.061333 67.04762 37.278476a130.681905 130.681905 0 0 1-67.04762-37.278476z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M787.382857 245.052952h-543.695238v543.719619h344.454095l199.241143-199.241142V245.052952z m-271.847619 448.170667c-0.024381 0-0.024381 0 0 0-0.024381 0-0.024381 0 0 0a176.298667 176.298667 0 1 1 0-352.621714l3.876572 0.048762a176.323048 176.323048 0 0 1-3.876572 352.572952z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M567.978667 516.437333a95.256381 95.256381 0 0 0-49.980953-86.089143c-1.511619-0.707048-2.462476-1.097143-2.462476-1.097142s-52.224 20.016762-52.224 84.260571c0 67.900952 52.224 91.062857 52.224 91.062857l0.926476-0.463238h0.048762c4.217905-1.926095 51.46819-25.307429 51.468191-87.673905z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M243.687619 245.052952h543.695238V589.531429l41.447619-41.447619V203.629714h-626.590476v626.566096h344.478476l41.423238-41.423239H243.687619z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M519.41181 340.626286a177.980952 177.980952 0 0 1 16.359619 4.315428l1.121523 0.414476c46.34819 15.018667 74.678857 46.543238 88.454096 82.797715 0.365714 0.950857 0.633905 1.926095 0.975238 2.901333 1.097143 3.072 2.194286 6.144 3.072 9.264762 0.950857 3.34019 1.731048 6.704762 2.462476 10.093714 0.170667 0.75581 0.390095 1.487238 0.536381 2.243048 17.091048 84.845714-35.035429 180.248381-116.662857 151.868952l0.78019-0.390095h-0.048762l-0.926476 0.463238s-52.224-23.161905-52.224-91.062857c0-64.24381 52.224-84.260571 52.224-84.260571s0.950857 0.390095 2.462476 1.097142l-0.219428-0.121904a0.390095 0.390095 0 0 1-0.170667-0.097524l-2.096762-1.024c-110.762667-22.332952-147.139048 145.456762-71.338667 225.792a130.56 130.56 0 0 0 67.04762 37.278476c1.462857 0.316952 2.80381 0.75581 4.291047 1.048381a176.323048 176.323048 0 1 0 3.900953-352.621714z'
            }
          ),
          h(
            'path',
            {
              fill: '#9FB2C0',
              d: 'M444.17219 654.896762c-75.800381-80.335238-39.448381-248.124952 71.338667-225.792a60.562286 60.562286 0 0 0 2.267429 1.121524l0.219428 0.121904a95.256381 95.256381 0 0 1 49.980953 86.089143c0 62.366476-47.274667 85.74781-51.468191 87.698286l-0.78019 0.390095c81.627429 28.355048 133.753905-67.047619 116.662857-151.868952-0.146286-0.75581-0.390095-1.487238-0.536381-2.243048a144.896 144.896 0 0 0-2.462476-10.093714 158.45181 158.45181 0 0 0-3.072-9.264762c-0.341333-0.950857-0.609524-1.950476-0.975238-2.901333-13.824-36.254476-42.154667-67.779048-88.454096-82.797715l-1.121523-0.414476a175.957333 175.957333 0 0 0-16.359619-4.315428l-3.876572-0.048762a176.298667 176.298667 0 0 0-176.298667 176.323047 176.274286 176.274286 0 0 0 176.274286 176.298667c-1.487238-0.292571-2.852571-0.731429-4.291047-1.048381-28.038095-6.192762-50.322286-19.529143-67.04762-37.254095z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          'Json输入'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
